<template>
  <div>
    <div>
      <div style="margin-top: 5%; margin-left: 2%; float: left">
        <van-icon name="arrow-left" style="font-size: 25px" @click="back" />
      </div>
      <div style="margin-top: 5%; margin-right: 3%; float: right">
        <van-button
          @click="gotoSignUp"
          round
          size="small"
          color="linear-gradient(to right, #FF99CC, #9999FF)"
        >
          Sign Up
        </van-button>
      </div>
    </div>

    <div style="padding-top: 15%; text-align: left; padding-left: 7%">
      <van-image
        width="130px"
        height="100px"
        fit="contain"
        :src="logo"
      />
    </div>

    <div style="text-align: left; padding-left: 7%">
      <h1 style="color: #9966cc">Sign in to Book</h1>
    </div>

    <van-divider
      :style="{
        color: '#989898',
        borderColor: '#989898',
        padding: '0 16px',
      }"
    >
      <van-icon name="column" />
    </van-divider>

    <div style="margin-top: 10%" :model="loginForm">
      <van-field
        v-model="loginForm.username"
        label="Username"
        left-icon="user-circle-o"
        right-icon="warning-o"
        placeholder="请输入用户名"
      />
      <p></p>
      <van-field
        v-model="loginForm.password"
        clearable
        label="Password"
        left-icon="browsing-history-o"
        placeholder="请输入密码"
      />
      <p></p>
    </div>

    <van-checkbox
      style="font-size: 10px; float: right; margin-right: 10%"
      icon-size="15px"
      v-model="checked"
      shape="square"
      >Remember</van-checkbox
    >

    <div style="width: 90%; margin: 0 auto; margin-top: 15%">
      <van-button @click="login(loginForm)" round color="#9966cc" size="large"
        ><p style="font-size: 20px">Sign In</p></van-button
      >
    </div>

    <van-divider
      :style="{
        color: '#989898',
        borderColor: '#989898',
        padding: '0 16px',
      }"
    >
      Or
    </van-divider>

    <div style="text-align: right; margin-right: 7%; letter-spacing: 15px">
      <van-icon color="#00CC66" size="45" name="wechat" />
      <van-icon color="#3399FF" size="45" name="alipay" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Icon,
  Button,
  Divider,
  Field,
  Checkbox,
  CheckboxGroup,
  Notify,
} from "vant";
import { Image as VanImage } from "vant";
Vue.use(VanImage);
import loginquest from "@/api/login";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Divider.name]: Divider,
    [Field.name]: Field,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Notify.name]: Notify,
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        token: ""
      },
      checked: false,
      logo:require("../../assets/icon/crazyLogo.png")
    };
  },
  methods: {
    login(loginForm) {
      loginquest
        .login(loginForm.username, loginForm.password)
        .then((res) => {
          const jwt = res.headers["authorization"];
          this.$store.commit("SET_TOKEN", jwt);
          this.$router.push("/person");
          Notify({ type: "success", message: "登录成功" });
        })
        .catch((err) => {
          Notify({ type: "warning", message: "登录失败" });
          console.log("登陆错误：" + err);
        });
    },
     back() {
      this.$router.replace("/person");
    },
    gotoSignUp() {
      this.$router.replace("/signup");
    },
  },
};
</script>

<style>
</style>